<!--用cesium渲染三维地图，内网接口地址-旧版本-->
<template>
  <div id="cesiumContainer"></div>
</template>

<script>
import jsonObj from '@/assets/js/point.json'
// Cesium.Ion.defaultAccessToken =
//   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjYzJkZDA4My0yNGMzLTQwYWUtOTIxYi05ODRlMmQ3ZWYwNmUiLCJpZCI6MTI3NTU2LCJpYXQiOjE2NzgxNTY3MDN9.0Ehf_yvdW79QAXzBzwAPCgf3MLyAB5B6SWJxE_w_dsA'

//Cesium官网注册后的授权token，没有token不能使用cesium在线的地形服务，这里需要改成自己的token
var viewer
export default {
  data() {
    return {
      map: {},
      pointList: [
        {
          lng: '120.43440397794053',
          lat: '36.16134748885198',
          url: 'rtsp://192.168.151.11:554/openUrl/xkpizUA',
          height: '21.305937000812527',
        },
      ],
      markPointList: [],
    }
  },
  components: {},
  created() {},
  mounted() {
    this.markPointList = jsonObj.data
    this.loadData()
  },
  destroyed() {
    // 删除地图上绘制的所有的点
    viewer.entities.removeAll()
  },
  computed: {},
  methods: {
    /**
     * 初始化
     */
    loadData() {
      viewer = new Cesium.Viewer('cesiumContainer', {
        baseLayerPicker: false,
        // geocoder: false, // 位置查找工具
        terrainProvider: Cesium.createWorldImagery(),
        geocoder: false, // 位置查找工具
        baseLayerPicker: false, // 图层选择器（地形影像服务）
        timeline: false, // 底部时间线
        homeButton: false, // 视角返回初始位置
        fullscreenButton: false, // 全屏
        animation: true, // 左下角仪表盘（动画器件）
        fullscreenButton: false, //是否显示全屏按钮
        sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
        sceneModePicker: false, // 选择视角的模式（球体、平铺、斜视平铺）
        navigationHelpButton: false, //导航帮助按钮
        // imageryProvider: Cesium.createWorldImagery({
        //   style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS,
        // }),
      })
      // console.log("viewer11111", viewer)
      this.$emit('cesiumLoad', viewer)

      // 去除版权信息
      viewer._cesiumWidget._creditContainer.style.display = 'none'
      //  拾取模型表面的坐标
      // var scene = viewer.scene
      // var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas)

      // handler.setInputAction(function (evt) {
      //   var scene = viewer.scene
      //   if (scene.mode !== Cesium.SceneMode.MORPHING) {
      //     var pickedObject = scene.pick(evt.position)
      //     if (scene.pickPositionSupported && Cesium.defined(pickedObject)) {
      //       var cartesian = viewer.scene.pickPosition(evt.position)
      //       if (Cesium.defined(cartesian)) {
      //         var cartographic = Cesium.Cartographic.fromCartesian(cartesian)
      //         var lng = Cesium.Math.toDegrees(cartographic.longitude)
      //         var lat = Cesium.Math.toDegrees(cartographic.latitude)
      //         var height = cartographic.height //模型高度
      //         // mapPosition = { x: lng, y: lat, z: height }
      //         console.log(lng, lat, height)
      //       }
      //     }
      //   }
      // }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      this.init3DTile()
    },
    /**
     * 获取点位
     */
    getPointData() {},
    init3DTile() {
      // 加在接口 3dtiles 对象
      var tileset = new Cesium.Cesium3DTileset({
        url: 'http://q3d.qd.gov.cn/qcserver/rest/services/zdqy_3Dtiles/CacheServer/tileset.json?key=b9eG3RC6OX66dj46vauU3zS3',
      })
      tileset.readyPromise.then(function (tileset) {
        // 添加tileset 到vierer
        viewer.scene.primitives.add(tileset)
        var default_HeadingPitchRange = new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius)
        // 聚焦titleset
        viewer.zoomTo(tileset, default_HeadingPitchRange)
      })
      /**
       * 创建范围 北站
       */
      // var west = parseFloat('120.36959094492549')
      // var south = parseFloat('36.16877217251774')
      // var east = parseFloat('120.36959094492549')
      // var north = parseFloat('36.16877217251774')
      /**
       * 乐客城
       */
      var west = parseFloat('120.432288')
      var south = parseFloat('36.166174')
      var east = parseFloat('120.432288')
      var north = parseFloat('36.166174')

      viewer.camera.flyTo({
        //定位到范围中心点
        destination: Cesium.Cartesian3.fromDegrees(Number((west + east) / 2), Number((south + north) / 2), 2200),
        orientation: {
          heading: Cesium.Math.toRadians(180), //1
          pitch: Cesium.Math.toRadians(-90),
          roll: 0,
        },
      })
      // 青岛北站 坐标：120.36959094492549 36.16877217251774 42.062301883697664
      // this.markPointList.map((v, index) => {
      //   var position = Cesium.Cartesian3.fromDegrees(v.longitude, v.latitude, 42.062301883697664)
      //   viewer.entities.add({
      //     id: `markpoint${index}`,
      //     indexCode: v.cameraIndexCode,
      //     position: position,
      //     billboard: {
      //       image: './icon-food.png',
      //       height: 50,
      //       width: 50,
      //       sizeInMeters: false, // 以图片像素为 标准
      //     },
      //     // point: {
      //     //   pixelSize: 15, //点的大小
      //     //   color: Cesium.Color.RED, //点的颜色
      //     //   outlineWidth: 2, //边框宽度
      //     //   outlineColor: Cesium.Color.WHITE.withAlpha(0.4), //边框颜色
      //     // },
      //   })
      // })
      this.handlePointClick() //添加点的点击事件
      // 设置缩放最大最小限制
      // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 500
      // viewer.scene.screenSpaceCameraController.maximumZoomDistance = 800
    },

    /**
     * 鼠标左键单击事件
     */
    handlePointClick() {
      let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
      let that = this
      handler.setInputAction(function (click) {
        let pick = viewer.scene.pick(click.position)
        if (pick && pick.id) {
          viewer._selectedEntity = [] //去除左击之后出现选中的绿框
          const indexCode = pick.id.indexCode
          that.$emit('clickIcon', indexCode)
          console.log('点击的位置', pick, indexCode)
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },
  },
}
</script>
<style scoped lang="less">
#cesiumContainer {
  height: 100vh;
  width: 100%;
}
</style>
